<!-- 首页 -->
<template>
  <div>
      <div class="banner">
          <el-carousel :interval="4000" height="40vh">
            <el-carousel-item>
              <img class="banner-image" src="https://img.tukuppt.com/preview/00/09/68/38/9683862611d134e411show.jpg" alt=""/>
            </el-carousel-item>
            <el-carousel-item>
              <img class="banner-image" src="https://pic.5tu.cn/uploads/allimg/2107/pic_5tu_big_6263316_969722068567d93046f9e8fbb67a2a90.jpg" alt=""/>
            </el-carousel-item>
            <el-carousel-item>
              <img class="banner-image" src="https://img0.baidu.com/it/u=2144152777,2502267290&fm=253&fmt=auto&app=138&f=JPEG?w=970&h=485" alt=""/>
            </el-carousel-item>
            <el-carousel-item>
              <img class="banner-image" src="https://pic.5tu.cn/uploads/allimg/2203/pic_5tu_big_1959819_71039e8a427cb69b8c6ef3027aeecd9e.jpg" alt=""/>
            </el-carousel-item>
            <el-carousel-item>
              <img class="banner-image" src="https://preview.qiantucdn.com/58pic/36/79/13/19658PICe6gxxMbnqe6YE_PIC2018.jpg%21w1024_new_3072" alt=""/>
            </el-carousel-item>
          </el-carousel>
      </div>
    <div class="article-container">
      <el-row type="flex">
        <el-col :span="8" class="col-class" >
          <el-row>
            <div class="article-category">
              <span>新闻热点</span>
              <div class="article-recommend-icon icon-new"></div>
            </div>
          </el-row>
          <el-row>
            <el-carousel :interval="4000" height="20vw" ref="news" indicator-position="outside" @click.native="linkTo">
              <el-empty v-if="newsList.length === 0"></el-empty>
              <el-carousel-item v-for="(item, index) in newsList" :key="index">
                <img class="news-image" :src="item.thumbnail" alt=""/>
                <span class="news-title">{{item.title}}</span>
              </el-carousel-item>
            </el-carousel>
          </el-row>
        </el-col>
        <el-col :span="8" :offset="1" class="col-class">
          <el-row>
            <div class="article-category">
              <span>工作动态</span>
              <div class="article-recommend-icon icon-work"></div>
            </div>
          </el-row>
          <el-row>
            <el-empty v-if="workList.length === 0"></el-empty>
            <ul>
              <li class="word-li" v-for="(item,index) in workList" @click="clickArticle(item)">
                <div class="data">{{index}}</div>
                <el-link class="word-li-a" :underline="false">{{item.title}}</el-link>
              </li>
            </ul>
          </el-row>
        </el-col>
        <el-col :span="6" :offset="1" class="col-class">
          <el-row>
            <div class="article-category">
              <span>通知公告</span>
              <div class="article-recommend-icon icon-notification"></div>
            </div>
          </el-row>
          <el-row>
            <div class="annu-box">
              <el-empty v-if="announcementList.length === 0"></el-empty>
              <ul >
                <li class="word-li" v-for="(item,index) in announcementList" @click="clickAnnouncement(item)">
                  <div class="data">{{index}}</div>
                  <el-link class="word-li-a" :underline="false">{{item.title}}</el-link>
                </li>
              </ul>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {getDashboardHotArticle} from "../api/article/article";

  export default {
    name:'DashBoard',
    data() {
      return {
        newsList: [],
        workList:[],
        announcementList:[]
      }
    },
    created() {
      document.title = "首页";
      getDashboardHotArticle().then((res) => {
        this.announcementList = res.announcementList
        this.workList = res.workList
        this.newsList = res.newsList
      })
    },
    methods: {
      clickAnnouncement(row) {
        this.$router.push({name: 'AnnouncementDetail', query: {aid: row.id}})
      },
      clickArticle(item) {
        this.$router.push({name: 'ArticleDetail', query: {aid: item.id}})
      },
      linkTo() {
        let activeIndex = this.$refs.news.activeIndex
        this.$router.push({name: 'ArticleDetail', query: {aid: this.newsList[activeIndex].id}})
      }
    }
  }
</script>

<style scoped>
  .article-recommend-icon {
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: text-top;
    background-position: center;
    background-size: 16px;
    background-repeat: no-repeat;
  }
  .icon-new {
    background-image: url("../../static/img/new.png");
  }
  .icon-work {
    background-image: url("../../static/img/work.png");
  }
  .icon-notification {
    background-image: url("../../static/img/notification.png");
  }
  .col-class {
    box-shadow: 0 0 15px #b6b5b5;
    border-radius: 1vh;
    padding: 10px 20px;
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
  }
  .word-li-a {
    margin-left: 45px;
    vertical-align: middle;
    line-height: 45px;
    display: block;
    font-size: 13px;
    font-family: 微软雅黑;
    color: rgb(50, 50, 50);
    height: 50px;
    padding: 5px 0px 0px;
    overflow: hidden;
  }
  .data {
    float: left;
    width: 35px;
    height: 59px;
    line-height: 59px;
    text-align: center;
    font-size: 25px;
    font-family: 'Times New Roman';
    color: #0569b5;
  }
  .word-li {
    height: 62px;
    vertical-align: middle;
    border-bottom: 1px solid #cccccc;
    padding: 0;
  }
  .article-category {
    border-radius: 1vh;
    height: 5vh;
    line-height: 5vh;
    position: relative;
    font-size: 16px;
    font-weight: bold;
    color: rgb(23, 62, 103);
  }
  .article-container {
    margin-top: 5vh;
  }
  .news-title {
    width: 100%;
    display: block;
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    color: rgb(38, 42, 47);
  }
  .news-image {
    width: 100%;
    height: 90%;
    display: block;
    cursor: pointer;
  }
  .banner-image {
    width: 100%;
    height: 100%;
  }
  .banner {
    border-radius:1vh;
    box-shadow: 0 0 20px #6f6c6c;
    margin: 0 auto;
    overflow: hidden;
  }
  .banner /deep/ .el-carousel__item {
    overflow: hidden;
  }
  .banner /deep/ .el-carousel__arrow {
    background-color: rgba(31 45 61 0.8);
  }
  .banner /deep/ .el-carousel__item:nth-child(2n) {

  }

  .banner /deep/ .el-carousel__item:nth-child(2n+1) {

  }
</style>
